import { Dialog, DialogContent } from "@/components/ui/dialog"

export function ProcessingDialog({ isDialogOpen, setIsDialogOpen }) {
  return (
    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen} className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" defaultOpen>
      <DialogContent className="bg-background p-8 rounded-lg shadow-lg">
        <div className="flex flex-col items-center justify-center gap-4">
          <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center animate-spin">
            <LoaderIcon className="w-8 h-8 text-primary" />
          </div>
          <div className="text-lg font-medium">Processing Transaction</div>
          <div className="text-muted-foreground">Please wait while we complete your transaction.</div>
        </div>
      </DialogContent>
    </Dialog>
  )
}

function LoaderIcon(props) {
  return (
    <svg
      {...props}
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M12 2v4" />
      <path d="m16.2 7.8 2.9-2.9" />
      <path d="M18 12h4" />
      <path d="m16.2 16.2 2.9 2.9" />
      <path d="M12 18v4" />
      <path d="m4.9 19.1 2.9-2.9" />
      <path d="M2 12h4" />
      <path d="m4.9 4.9 2.9 2.9" />
    </svg>
  )
}
